<script lang='ts' setup>
import { onActivated, onMounted, ref } from "vue";
import { onCopy, link } from "./script/barr";
// import signIn from "@/components/j-svg/signIn.vue";
import YNoLogin from "@/components/y-nologin/index.vue";
import Copy from "@/components/j-svg/copy.vue";
import { Platform, ShareItem } from "@/comm/ShareConfig"
import { useUser } from "@/stores/user";
import Jtwitter from "@/assets/svg/twitter.svg";
import Jfacebook from "@/assets/svg/facebook.svg";
import Jtelegram from "@/assets/svg/telegram.svg";
import Jreddit from "@/assets/svg/reddit.svg";
import i18n from "@/locals";
import { get } from "@/comm/request";
import { URL_USER_INFO } from "@/comm/api";
import { reload } from "@/comm/tools";
let startTime = ref('')
    let shareTwTime = ref('')
    let shareTgTime = ref('')
const user = useUser();
const Rshare = ref<ShareItem<any>[]>([new ShareItem<any>(Jtwitter, Platform.TWITTER), new ShareItem<any>(Jtelegram, Platform.TELEGRAM)]);
onActivated(() => {

})

onMounted(async () => {
    let temp : any = new Date().getTime()
    shareTgTime.value = localStorage.getItem('shareTgTime') || ''
    shareTwTime.value = localStorage.getItem('shareTwTime') || ''
    startTime.value = String(new Date(temp).getDate())
    await user.getuserEnergyCount();
    const res: any = await get(URL_USER_INFO);
    if (res.code === 200) {
        Rshare.value = [new ShareItem<any>(Jtwitter, Platform.TWITTER).setUrl(location.origin.concat("/recommend/", res.data.user.recommendCode)),
        // new ShareItem<any>(Jfacebook, Platform.TWITTER).setUrl(location.href.concat("/recommend/", user.info?.recommendCode)),
        new ShareItem<any>(Jtelegram, Platform.TELEGRAM).setUrl(location.origin.concat("/recommend/", res.data.user.recommendCode)),
            // new ShareItem<any>(Jreddit, Platform.TELEGRAM).setUrl(location.href.concat("/recommend/", user.info?.recommendCode))
        ]
        let title = `${i18n.global.t("message.Global.shares.ts")}\n`
        Rshare.value.forEach(item => item.setTitle(title))
    }

});
</script>

<template>
    <div class='bar-r'>
        <div class="title">{{ $t('message.barr.a') }}</div>
        <div class="ipt c-title-3 d-flex align-center justify-space-between">
            <span class="c-clor"> {{ $t("message.Share.c") }}</span>
            <span class="label d-flex align-center" @click="() => onCopy(user.info?.recommendCode)">
                <span class="txt">{{ user.info?.recommendCode }}</span>
                <Copy></Copy>
            </span>
        </div>
        <div class="ipt c-title-3 d-flex align-center justify-space-between">
            <span class="c-clor">{{ $t("message.Share.b") }}</span>
            <span class="label d-flex align-center" @click="() => onCopy(link)">
                <span class="txt">{{ link }}</span>
                <Copy></Copy>
            </span>
        </div>
        <div class="barr_share d-flex flex-column">
            <span>{{ $t('message.barr.b') }}</span>
            <div class="icons">
                <ShareNetwork class="d-inline-flex" v-for="item in Rshare" :title="item.title" @open="reload"
                    :description="item.description" :network="item.network" :hashtags="item.hashtags" :link="item.url"
                    :url="item.url">
                    <div class="share_img">
                        <img class="icon" :src="item.icon">
                        <span class="red_pots" v-if="item.network=='Twitter'&&shareTwTime!=startTime"></span>
                        <span class="red_pots" v-if="item.network=='Telegram'&&shareTgTime!=startTime"></span>

                    </div>
                </ShareNetwork>
            </div>
        </div>
        <YNoLogin v-if="!user.isLogin"></YNoLogin>
    </div>
</template>

<style lang='less' scoped>
.share_img {
    position: relative;
}

.red_pots {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #F6475D;
    position: absolute;
    top: 20px;
    right: 15px;
}

.bar-r {
    width: 496px;
    min-height: 300px;
    background: #171A1F;
    border-radius: 4px;
    padding-inline: 21px;
    position: relative;

    .title {
        font-size: 18px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #EAECEF;
        line-height: 25px;
        margin-top: 27px;
    }

    .grid,
    .ipt {
        border-radius: 4px;
    }

    .grid {
        height: 78px;
        margin-block: 30px;
        // padding-inline: 24px;
        background-color: var(--main-op);

        .more {
            color: var(--main);
            font-size: 16px;
            cursor: pointer;
        }

        .v-col {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .sub {
                margin-left: 5px;
                text-wrap: nowrap;
                color: var(--main);
                align-self: flex-start;
                animation: subanim 1.5s ease infinite;
            }

            p {
                color: var(--main);
                // font-weight:lighter;
                // font-size: 24px;
            }
        }

        .col0 {
            flex: 1.5;
        }

        .col1 {
            flex: 2;
        }

        .col2 {
            flex: 2;
        }
    }

    .ipt {
        width: 100%;
        height: 44px;
        padding-inline: 24px;
        background: #1F232A;
        margin-top: 15px;

        .label {
            // max-width: 60%;
            flex: 1 0 0;
            margin-left: 20px;
            width: 0;
            justify-content: flex-end;

            .txt {
                max-width: 90%;
                overflow: hidden;
                text-overflow: ellipsis;
                text-wrap: nowrap;
            }
        }

        .copy {
            margin-left: 8px;
        }
    }

    .barr_share {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #EAECEF;
        line-height: 20px;
        margin-top: 26px;

        .icons {
            margin-left: -16px;
        }

        .icon {
            width: 60px;
        }
    }
}</style>